<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalabale=no,maxmum=1.0,minmun=1.0">
  <title>多快好省，购物上京东！</title>
  <!-- 初始化 -->
  <link rel="stylesheet" href="./css/normalize.css">
  <link rel="stylesheet" href="./css/index.css">
  <script src="./js/index.js"></script>
</head>
<body> 
  <div class="top-tips">
    <div><img src="./img/close.png"/></div>
    <div><img src="./img/logo1.png"></div>
    <div>打开京东APP,购物实惠更轻松</div>
    <div>立即打开</div> 
  </div>
   <!-- 搜索框 -->
   <header class="search-box">
    <div class="search-btn">
      <span></span>
    </div>
    <div class="search">
      <span></span>
      <i></i>
      <input type="search" placeholder="超薄本">
    </div>
    <div class="login">登录</div>
  </header>
  <div class="content">
    <!-- 焦点图部分 -->
    <div class="banner">
      <!-- 利用一个标签的背景制作了大盒子的背景的效果 -->
      <div class="banner-bg">
        <!-- 滑动焦点图 -->
      </div>
      <ul>
        <li><a href=""><img src="./img/banner01.dpg" alt=""></a></li>
      </ul>
    </div>
    <div class="youhui">
      <a href="#"><img src="./img/banner_bottom_01.dpg" alt=""></a>
      <a href="#"><img src="./img/banner_bottom_02.dpg" alt=""></a>
      <a href="#"><img src="./img/banner_bottom_03.dpg" alt=""></a>
    </div>
    <!-- 导航 -->
    <nav>
      <div class="mall-nav">  
        <a href="#"><img src="./img/nav01.webp" alt=""><span>京东超市</span></a>
        <a href="#"><img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/135931/4/3281/5598/5efbf2c0Edbdc82c7/ed9861b4ddfb9f30.png" alt=""><span>京东超市</span></a>
        <a href="#"><img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/140012/8/1804/3641/5efbf318E38bd5dad/0db99d859ab16ce9.png" alt=""><span>京东超市</span></a>
        <a href="#"><img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/129215/21/5978/3618/5efbf344Ebec23ae8/59712d986b10bb0a.png" alt=""><span>京东超市</span></a>
        <a href="#"><img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/116602/7/11200/3796/5efbf375Ebba41029/f07cc166f368fa05.png" alt=""><span>京东超市</span></a>
        <a href="#"><img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/146390/3/1846/4909/5efbf39aEe5f5f797/300071558a9ab078.png" alt=""><span>京东超市</span></a>
        <a href="#"><img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/150351/19/14167/6853/5fed882dE195ef673/b2aa7d67e675baf8.png" alt=""><span>京东超市</span></a>
        <a href="#"><img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/113589/24/11332/4897/5efbf3feE705d87db/e5c12d5e943266b9.png" alt=""><span>京东超市</span></a>
        <a href="#"><img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/129184/28/5977/3711/5efbf53aE2c2e6a07/7db529ce0e00838f.png" alt=""><span>京东超市</span></a>
        <a href="#"><img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/123730/37/5924/4189/5efbf567E0a226121/d04df7c74c87cf68.png" alt=""><span>京东超市</span></a>
      </div>
    </nav>
    <div class="goodList">
      <a href="#">
        <p></p>
        <span>正品直邮</span>
        <img src="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/146350/29/713/33082/5ee73d9fE1ae995ad/0ec365679efbf615.png!q70.jpg.dpg" >
      </a>
      <a href="#">
        <p>来电好货</p>
        <span>正品直邮</span>
        <img src="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/146350/29/713/33082/5ee73d9fE1ae995ad/0ec365679efbf615.png!q70.jpg.dpg" >
      </a>
      <a href="#">
        <p>国潮风尚</p>
        <span>正品直邮</span>
        <img src="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/146350/29/713/33082/5ee73d9fE1ae995ad/0ec365679efbf615.png!q70.jpg.dpg" >
      </a>
      <a href="#">
        <p></p>
        <span>正品直邮</span>
        <img src="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/146350/29/713/33082/5ee73d9fE1ae995ad/0ec365679efbf615.png!q70.jpg.dpg" >
      </a>
    </div> 
    <div class="miaosha">
      <div class="title">
        <p>京东秒杀</p>
        <span class="timeMiaosha">
          <span>0</span> 
          <img src="https://wq.360buyimg.com/wxsq_project/portal/m_jd_index/images/seckill-time-to_1de70c91.png"/>
        </span>
        <span class="time">12</span>
        <span class="maohao">:</span>
        <span class="time">12</span>
        <span class="maohao">:</span>
        <span class="time">12</span>
      </div>
      <ul class="qiangList">
       <li>
        <a href="#">
          <img src="https://img11.360buyimg.com/n7/s150x150_jfs/t1/158258/18/368/49716/5fead39dE657c5fbe/865f4388f4412c37.jpg.dpg" alt="">
          <p><span>￥</span>55</p>
          <p><span>￥</span>155</p>
        </a>
       </li>
       <li>
        <a href="#">
          <img src="https://img11.360buyimg.com/n7/s150x150_jfs/t1/158258/18/368/49716/5fead39dE657c5fbe/865f4388f4412c37.jpg.dpg" alt="">
          <p><span>￥</span>55</p>
          <p><span>￥</span>155</p>
        </a>
       </li>
       <li>
        <a href="#">
          <img src="https://img11.360buyimg.com/n7/s150x150_jfs/t1/158258/18/368/49716/5fead39dE657c5fbe/865f4388f4412c37.jpg.dpg" alt="">
          <p><span>￥</span>55</p>
          <p><span>￥</span>155</p>
        </a>
       </li>
       <li>
        <a href="#">
          <img src="https://img11.360buyimg.com/n7/s150x150_jfs/t1/158258/18/368/49716/5fead39dE657c5fbe/865f4388f4412c37.jpg.dpg" alt="">
          <p><span>￥</span>55</p>
          <p><span>￥</span>155</p>
        </a>
       </li>
       <li>
        <a href="#">
          <img src="https://img11.360buyimg.com/n7/s150x150_jfs/t1/158258/18/368/49716/5fead39dE657c5fbe/865f4388f4412c37.jpg.dpg" alt="">
          <p><span>￥</span>2198</p>
          <p><span>￥</span>155</p>
        </a>
       </li>
       <li>
        <a href="#">
          <img src="https://img11.360buyimg.com/n7/s150x150_jfs/t1/158258/18/368/49716/5fead39dE657c5fbe/865f4388f4412c37.jpg.dpg" alt="">
          <p><span>￥</span>55</p>
          <p><span>￥</span>2198</p>
        </a>
       </li>
      </ul>
    </div>
    <div class="labelList"> 
      <div> 
        <img src="https://m.360buyimg.com/n1/s240x240_jfs/t1/66515/20/7809/106772/5d5d0c9aEf8ebae11/2621287a3fb4029d.jpg!q70.jpg.dpg">
        <p>下单有礼</p>
        <p>嘉年华</p>
      </div>
      <div> 
        <img src="https://m.360buyimg.com/n1/s240x240_jfs/t1/66515/20/7809/106772/5d5d0c9aEf8ebae11/2621287a3fb4029d.jpg!q70.jpg.dpg">
        <p>下单有礼</p>
        <p>嘉年华</p>
      </div>
      <div> 
        <img src="https://m.360buyimg.com/n1/s240x240_jfs/t1/66515/20/7809/106772/5d5d0c9aEf8ebae11/2621287a3fb4029d.jpg!q70.jpg.dpg">
        <p>下单有礼</p>
        <p>嘉年华</p>
      </div>
      <div> 
        <img src="https://m.360buyimg.com/n1/s240x240_jfs/t1/66515/20/7809/106772/5d5d0c9aEf8ebae11/2621287a3fb4029d.jpg!q70.jpg.dpg">
        <p>下单有礼</p>
        <p>嘉年华</p>
      </div>
    </div>
    <div class="yourLike"> 
      <img class="headerImg" src="https://img12.360buyimg.com/img/s750x70_jfs/t1/148857/1/16777/13220/5fc9f9d0E734c0ee5/88c99cdbe410e58a.png">
      <ul>
        <li>
          <a href="">
            <img src="https://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/27533/3/11060/162188/5c8b1c1dE3c636882/3084c7aa894cad35.jpg!q70.dpg.webp" alt=""><p>【全铝镁合金 亮面加厚】全金属拉杆箱万向轮行李箱男女旅行箱硬箱登机箱 全铝 黑色 20英寸-登机箱</p>
            <span>￥12</span>
          </a>
        </li>
        <li>
          <a href="">
            <img src="https://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/27533/3/11060/162188/5c8b1c1dE3c636882/3084c7aa894cad35.jpg!q70.dpg.webp" alt="">
            <p>【全铝镁合金 亮面加厚】全金属拉杆箱万向轮行李箱男女旅行箱硬箱登机箱 全铝 黑色 20英寸-登机箱</p>
            <span>￥12</span>
          </a>
        </li>
        <li>
          <a href="">
            <img src="https://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/27533/3/11060/162188/5c8b1c1dE3c636882/3084c7aa894cad35.jpg!q70.dpg.webp" alt="">
            <p>【全铝镁合金 亮面加厚】全金属拉杆箱万向轮行李箱男女旅行箱硬箱登机箱 全铝 黑色 20英寸-登机箱</p>
            <span>￥12</span>
          </a>
        </li>
        <li>
          <a href="">
            <img src="https://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/27533/3/11060/162188/5c8b1c1dE3c636882/3084c7aa894cad35.jpg!q70.dpg.webp" alt="">
            <p>【全铝镁合金 亮面加厚】全金属拉杆箱万向轮行李箱男女旅行箱硬箱登机箱 全铝 黑色 20英寸-登机箱</p>
            <span>￥12</span>
          </a>
        </li>
      </ul>
    </div>

    <footer>
      <ul>
        <li>
          <img src="https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/81741/30/12345/4140/5d9c4b13E726f0a1e/82c582e7c375e4b3.png">
        </li>
        <li>
          <img src="https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/56507/6/12787/3168/5d9c4b12Ef363dd8d/4af32f42575509d8.png">
        </li>
        <li>
          <img src="https://img12.360buyimg.com/img/s130x100_jfs/t1/152922/39/13124/3525/5ff2ae9eE4a0a7636/a161ad4f4d2bb5ea.png">
        </li>
        <li>
          <img src="https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/64954/4/12406/3529/5d9c4b12Ee7a82735/f2fe0a88bf344736.png">
        </li>
        <li> 
          <img src="https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/81741/30/12345/4140/5d9c4b13E726f0a1e/82c582e7c375e4b3.png">
        </li>
      </ul>
    </footer>    
  </div>
</body>
</html> 